import * as ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 将 Element Plus 组件映射为 Element UI 的组件名称
const componentMap = {
  ElPagination: 'Pagination',
  ElDialog: 'Dialog',
  ElDropdown: 'Dropdown',
  ElDropdownMenu: 'DropdownMenu',
  ElDropdownItem: 'DropdownItem',
  ElMenu: 'Menu',
  ElSubMenu: 'submenu', // 将 ElSubMenu 映射为 SubMenu
  ElMenuItem: 'MenuItem',
  ElMenuItemGroup: 'MenuItemGroup',
  ElInput: 'Input',
  ElInputNumber: 'InputNumber',
  ElRadio: 'Radio',
  ElRadioGroup: 'RadioGroup',
  ElCheckbox: 'Checkbox',
  ElCheckboxGroup: 'CheckboxGroup',
  ElSwitch: 'Switch',
  ElSelect: 'Select',
  ElOption: 'Option',
  ElButton: 'Button',
  ElTable: 'Table',
  ElTableColumn: 'TableColumn',
  ElDatePicker: 'DatePicker',
  ElTree: 'Tree',
  ElBreadcrumb: 'Breadcrumb',
  ElBreadcrumbItem: 'BreadcrumbItem',
  ElForm: 'Form',
  ElFormItem: 'FormItem',
  ElTabs: 'Tabs',
  ElTabPane: 'TabPane',
  ElTag: 'Tag',
  ElAlert: 'Alert',
  ElSlider: 'Slider',
  ElIcon: 'Icon',
  ElRow: 'Row',
  ElCol: 'Col',
  ElUpload: 'Upload',
  ElLoading: 'Loading',
  ElMessageBox: 'MessageBox',
  ElMessage: 'Message',
  ElNotification: 'Notification'
}

const install = (app) => {
  // 全局注册所有 Element Plus 组件，同时映射为 Element UI 的组件名称
  for (const [elPlusName, elUiName] of Object.entries(componentMap)) {
    const component = ElementPlus[elPlusName]
    if (component) {
      app.component(elUiName, component) // 注册为 Element UI 的组件名称
      app.component(elPlusName, component) // 同时保留 Element Plus 的组件名称
    }
  }

  // 添加全局配置
  app.config.globalProperties.$ELEMENT = {
    size: 'default',
    zIndex: 2000
  }

  // 添加全局方法
  app.config.globalProperties.$message = ElementPlus.ElMessage
  app.config.globalProperties.$msgbox = ElementPlus.ElMessageBox
  app.config.globalProperties.$alert = ElementPlus.ElMessageBox.alert
  app.config.globalProperties.$confirm = ElementPlus.ElMessageBox.confirm
  app.config.globalProperties.$prompt = ElementPlus.ElMessageBox.prompt
}

export default { install }
